<template>
  <div id="nav">
    <router-link :class="{ active: $route.name == 'home' }" to="/"
      ><i  class="iconfont">&#xe60b;</i>精选</router-link
    >
    <router-link :class="{ active: $route.name == 'class' }" to="/class/-1"
      ><i class="iconfont">&#xe7f8;</i>分类</router-link
    >
    <router-link  :class="{ active: $route.name == 'used'||$route.name=='love' }"
      to="/wallpaper/used"
      ><i class="iconfont">&#xe600;</i>我的壁纸</router-link
    >
  </div>
  <router-view />
  <loader v-if="isLoading"></loader>
  <noti></noti>
  <back-top></back-top>
</template>
<script lang="ts">
import { defineComponent,computed } from "vue";
import { useStore } from "vuex";
import Loader from './components/Loader.vue'
import BackTop from './components/BackTop.vue'
import Noti from './components/Noti.vue'
export default defineComponent({
  components:{
    Loader,
    BackTop,
    Noti
  },
  setup() {
    const store = useStore();
    const isLoading = computed(() => store.state.loading)
    const random=(min:number, max:number)=>{
        return Math.floor(Math.random() * (max - min)) + min;
      }
    const payload = {
      ch: "5.5.0.0803",
      mac: `${random(10000,1000000)}`,
      mt: `Lenovo XiaoXin Chao${random(1000,9000)}-${random(5,100)}ARR`,
      os: "win10",
      osBit: "64",
      sn: `${random(10000,1000000)}`,
      uuid: `${random(10000,99999)}-${random(10000,99999)}-${random(10000,99999)}-${random(10000,99999)}-${random(10000,1000000)}`,
    };
    store
      .dispatch("loginAndFetch", payload)
      .then((data) => {
        console.log(data)
      })
      .catch((e) => {
        console.log(e);
      });
    return {
      isLoading
    };
  },
});
</script>
<style lang="stylus">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  #nav {
    height: 60px;
    width: 100%;
    background-color: rgb(236, 241, 250);
    display: flex;
    align-items: center;

    a {
      display: inline-block;
      line-height: 50px;
      border-radius: 8px;
      flex-grow: 1;
      color: #000;
      text-decoration: none;
    }
    .iconfont{
      color rgb(151,169,221)
    }

    .active {
      background-color: rgb(76, 106, 255);
      color: #fff;
      .iconfont{
        color: #fff;
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.9s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
